import React, { useEffect, useState } from "react";
import { Drawer, Radio } from "tdesign-react";
import DesignSetting from "./components/Design";
import "./index.scss";
import { updateSlideCollapse, updateThemeMode } from "../../../store/modules/app/action";
import { connect } from "react-redux";

interface IGlobalSetting {
  // 显示状态
  visible: boolean;
  // 关闭回调
  onClose?: () => void;
}


/**
 * 全局设置
 * @param props
 * @returns
 */
const GlobalSetting: React.FC<IGlobalSetting> = (props) => {
  const { visible, onClose } = props;
  const [visibleDrawer, setVisibleDrawer] = useState<boolean>(false);
  const [currentTab, setCurrentTab] = useState<string>('design');
  useEffect(() => {
    setVisibleDrawer(visible);
  }, [visible]);

  const onRadioChange = (value: string) => {
    setCurrentTab(value);
  };

  /**
   * 关闭事件
   */
  const onDrawerClose = () => {
    setVisibleDrawer(false);
    if (onClose) {
      onClose();
    }
  }

  // 头部
  const Header = (
    <div className="header">
      <div className="header__left">
        <h4 className="title">偏好设置</h4>
        <p className="desc">自定义偏好设置 & 实时预览</p>
      </div>
      <div className="header__right">
        {/* 刷新
        <span>关闭</span> */}
      </div>
    </div>
  )
  const Footer = (
    <div className="footer">
      底部
    </div>
  )

  return (
    <Drawer size="360px" header={ Header } footer={Footer} visible={visibleDrawer} onClose={onDrawerClose}>
      <Radio.Group className="reset-radio" value={currentTab} variant="default-filled" defaultValue="normal" onChange={onRadioChange}>
        <Radio.Button value="design">外观</Radio.Button>
        <Radio.Button value="layout">布局</Radio.Button>
        <Radio.Button value="common">通用</Radio.Button>
      </Radio.Group>
      <div className="content">
        <DesignSetting />
      </div>
    </Drawer>
  );
};

const mapStateToProps = (state: any) => state.app;
const mapDispatchToProps = { updateSlideCollapse, updateThemeMode };
export default connect(mapStateToProps, mapDispatchToProps)(GlobalSetting);
